<!-- 标题组件 -->
<template>
    <div id='title_container'>
        {{ userName }}{{ title }}
    </div>
</template>
<script setup>
import { defineProps, watch, ref, onMounted } from 'vue';
import { useCommonState } from "../store/commonState"
import { getLoginUserName, getValueBykey } from "../indexDB/dbKV"



// 实例化Pinia自定义sotore
const commonStore = useCommonState()

// Title.vue
async function getLoginUserInfo() {
  try {
    const userInfo = await getValueBykey("userInfo");
    if (userInfo && userInfo.name) {
      userName.value = userInfo.name;
    } else {
      userName.value = "未登录用户";
      // 可以添加跳转到登录页的逻辑
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
    userName.value = "未登录用户";
  }
}


onMounted(() => {
    getLoginUserInfo()
    getLoginUserName().then(res => {
        userName.value = res
    })
})

// 监听切换导航，动态修改标题文本
watch(() => commonStore.selectedNav,
    (newValue, oldValue) => {
        if (newValue == "chat") {
            title.value = "首页"
        } else {
            title.value = "联系"
        }
    }
)

// 声明标题
let title = ref("首页")
let userName = ref("")


</script>
<style scoped>
body,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#title_container {
    max-width: 700px;
    font-size: 17px;
    box-sizing: border-box;
    background-color: #eeeeee;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    align-content: center;
}
</style>